<template>
  <el-footer class="footer">
    <div class="footer-content">
      <div class="service-info">
        <el-row>
          <el-col :span="4" :offset="2" class="service-item">
            <p>正品保障</p>
          </el-col>
          <el-col :span="4" class="service-item">
            <p>闪电发货</p>
          </el-col>
          <el-col :span="4" class="service-item">
            <p>优质服务</p>
          </el-col>
          <el-col :span="4" class="service-item">
            <p>诚信电商</p>
          </el-col>
          <el-col :span="4" class="service-item">
            <p>无忧退货</p>
          </el-col>
        </el-row>
      </div>
      <el-row class="footer-links">
        <el-col :span="8" class="footer-section">
          <h3>关于我们</h3>
          <p>公司简介</p>
          <p>联系我们</p>
        </el-col>
        <el-col :span="8" class="footer-section">
          <h3>客户服务</h3>
          <p>帮助中心</p>
          <p>售后服务</p>
        </el-col>
        <el-col :span="8" class="footer-section">
          <h3>商家服务</h3>
          <p>商家入驻</p>
          <p>商家后台</p>
        </el-col>
      </el-row>
    </div>
    <div class="copyright">
      <p>© 2025 电商平台 版权所有</p>
    </div>
  </el-footer>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
.footer {
  color: #333;
  margin-top: 30px;
}
.service-info {
  background-color: #f4efd2;
  text-align: center;
}
.service-item {
  text-align: center;
}
.service-item p {
  color: #666;
  font-size: 16px;
  cursor: pointer;
}
.footer-links {
  background-color: #f4efd2;
}
.footer-section {
  text-align: center; /* 居中对齐 */
}
.footer-section h3 {
  font-size: 18px;
  margin: 10px 0;
  color: #333;
  cursor: pointer;
}
.footer-section p {
  margin: 5px 0;
  color: #666;
  cursor: pointer;
}
.footer-section p:hover {
  color: #f4a46f;
  background-color: #f0f9eb;
}
.copyright {
  text-align: center;
  color: #666;
  font-size: 14px;
}
</style>
